<template>
  <div>
    <!-- 西式婚纱列表 -->
    <div class="western">
      <!-- 首页>西式婚纱 -->
      <div class="nav1">
        <router-link class="index" to="/">首页</router-link>
        <span>></span>
        <router-link to="#">西式婚纱</router-link>
      </div>
      <!-- 图 -->
      <img class="w-footer-pic" src="../../../../public/img/w_footer.jpg" alt="" />
      <!-- 品牌文字介绍 -->
      <div class="produce">
        <h1>
          Licorne purer
          <br />
          <span>纯真 · 至美 · 唯爱</span>
        </h1>
        <p>
          &nbsp;&nbsp;&nbsp;&nbsp;Licorne purer
          使用从世界各地挑选出的精细的服装面料，以高级定制的概念、前沿的剪裁技术进行服装设计,是花费漫长的岁月制作出来的精美婚纱礼服。
          <br />
          &nbsp;&nbsp;&nbsp;&nbsp;在Licorne
          purer可以租到和高级定制礼服同样品质的礼服。每款婚纱由工作室的专门工作人员进行试穿,提出修改建议，经过不断地修改和整理,实现每款婚纱都能体现女性的独特知性美。另外,在这个充满幸福感的时期,为了想要多留一张珍藏的照片的新娘们,我们还准备了特别的照片计划。
          最大的好处是可以从当天不同的礼服中挑选。
          因而也成为了让正式演出更加美丽发光的预演练习,充满魅力的照片计划,期待你来体验。
        </p>
      </div>
      <!-- 婚纱展示区 -->
      <ul v-if="data">
        <li
          v-for="({ title, isNew, explains, img1}, i) in data.results"
          :key="title"
          v-show="i < 10"
          class="col-xs-6 col-sm-3 dress"
        >
          <img :id="`${i}`" @click="goto(`${i}`)" v-src="img1" alt="" />
          <!-- hover 婚纱遮罩-->
          <div class="dress-mask">
            <div class="dress-summary">
              <p :id="`${i}`" @click="goto(`${i}`)" class="dress-summary-title">
                {{ title }} <span v-if="isNew == 'true'">NEW</span>
              </p>
              <p :id="`${i}`" @click="goto(`${i}`)">{{ explains }}</p>
            </div>
          </div>
        </li>
      </ul>

      <!-- 商品页码 -->

      <!-- 店铺轮播图 -->
      <STORES></STORES>
      <!-- 猜你喜欢 -->
      <Guesst></Guesst>
      <!-- 回顶 -->
      <top></top>
    </div>
  </div>
</template>

<script>
import STORES from "@/components/STORES.vue";
import Guesst from "@/components/Guesst.vue";
import Top from "@/components/Top.vue";
export default {
  components: { STORES, Guesst,Top },
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let url = "/img_detail";
      this.axios.get(url).then((res) => {
        console.log("西式",res);
        this.data = res.data;
        console.log("西式变量",this.data);
      });
    },
    // 编程式跳转  绑定goto方法
    //index: 代表触发goto函数的元素的序号
    goto(index) {
      console.log("index:", index);
      return this.$router.push("/westernDetail?lid=" + index);
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  box-sizing: border-box;
}

.western {
  // 首页>西式婚纱
  > .nav1 {
    padding: 13px 4px;
    font-size: 15px;

    a,
    span {
      padding: 0 4px;
    }
  }

  //图片
  .w-footer-pic {
    width: 100%;
    padding: 8px 0;
  }

  // 品牌文字介绍
  .produce {
    > h1 {
      font-family: monospace;
      font-size: 40px;
      color: #444;
      text-align: center;
      margin: 0;
      padding-bottom: 3px;
      line-height: 1.5;
      padding: 50px 0 0;

      > span {
        display: block;
        letter-spacing: initial;
        padding-bottom: 50px;
        font-family: Libre Baskerville, sans-serif;
        font-size: 1.3rem;
        color: #999;
        text-align: center;
        line-height: 1.5;
        margin: 0;
      }
    }

    > p {
      color: #777;
      line-height: 2;
      font-family: Libre Baskerville, sans-serif;
      margin: 0 0 80px;
      padding: 0 15px;
    }
  }

  // 婚纱展示
  ul {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    // 每个卡片
    > li.dress {
      width: 48%;
      padding-bottom: 55px;
      position: relative;

      > img {
        width: 100%;
        display: block;
      }

      // 遮罩 :后面利用js实现,onmouseover时调用方法,让遮罩显示opacity:1
      > .dress-mask {
        position: absolute;
        left: 0;
        bottom: 0;

        > .dress-summary {
          padding: 3px 6px 10px;
          background-color: rgba(255, 255, 255, 0.3);

          > p.dress-summary-title {
            line-height: 1.428571429;
            color: #444;
            margin-bottom: 3px;
            font-size: 14px;
            font-family: 黑体;

            > span {
              border: 1px solid #786542;
              color: #786542;
              padding: 0px 6px;
              border-radius: 16%;
              font-size: 7px;
              font-family: 黑体;
            }
          }

          > p:nth-child(2) {
            line-height: 1.428571429;
            color: #444;
            font-family: 黑体;
            font-size: 14px;
            // 设置多行文本溢出省略号
            // 文本溢出隐藏
            overflow: hidden;
            /* 转为弹性伸缩盒子 省略号,同text-overflow:ellipsis */
            display: -webkit-box;
            /* 设置弹性盒子的子元素的排列方式 */
            -webkit-box-orient: vertical;
            /* 设置显示文本的行数  最多显示4行 */
            -webkit-line-clamp: 1;
          }
        }
      }
    }
  }
}
</style>